<template>
	<view class="avatar-name">
		<view class="df-ai-cen">
			<view class="cu-avatar round" :style="{ backgroundImage: 'url(' + avatar + ')' }" :class="headSize"></view>
			<view class="info-name line-text" :style="{ width: nameWidth + 'rpx', color: color }">{{ name }}</view>
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
	data() {
		return {};
	},
	props: {
		avatar: {
			type: String,
			default: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/user.png'
		},
		name: {
			type: String,
			default: 'XXX'
		},
		nameWidth: {
			type: Number,
			default: 150
		},
		color: {
			type: String,
			default: '#666666'
		},
		headSize: {
			type: String,
			default: 'sm'
		}
	},
	methods: {}
};
</script>

<style lang="scss">
.avatar-name {
	.info-name {
		margin-left: 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}
}
</style>
